import React, { Component } from 'react';
import { Link,withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Layout, Table, Input, Button, InputNumber, Popconfirm } from 'antd';

import '../style.scss';

const { Content } = Layout;
const { Column } = Table;

@withRouter
class TableList extends Component{
  state={
    page: 10,
    searchValue: ''
  };

  changePage = (value) => {
    this.setState({page:value});
  }

  setSearchValue = (searchValue) => {
    this.setState({searchValue})
  }

  handleSearch = () => {
    this.props.searchTable(this.state.searchValue)
  }

  resetSearch = () => {
    this.setState({searchValue:''});
    const dataType = this.props.match.params.dataType;
    const id = this.props.match.params.databaseId;
    const params = {id};
    this.props.getAllTables(dataType,params);
  }

  componentDidMount(){
    console.log(this.props.match.params);
    const dataType = this.props.match.params.dataType;
    const id = this.props.match.params.databaseId;
    const params = {id};
    this.props.getAllTables(dataType,params);
  };

  render(){
    const { page } = this.state;
    return (
      <Content style={{marginTop:12}}>
        <div>
          <div style={{display: 'inline-block', fontWeight: 'bold'}}>库表管理 | {this.props.match.params.databaseName}({this.props.match.params.dataType})的列表</div>
          <div style={{float: 'right', display: 'inline-block', height:'100%'}}>
            <span>关键字: <Input placeholder="请输入关键字" style={{width: 200}} onChange={this.setSearchValue}/></span>
            <Button type="primary" style={{marginLeft: 12}} onClick={this.handleSearch}>搜索</Button>
            <Button type="primary" style={{marginLeft: 12}}>重置</Button>
          </div>
        </div>
        <div className="table-box" style={{marginTop:24}}>
          <Table 
          pagination={{pageSize:page,showSizeChanger:false}}
          dataSource={this.props.tables}
          >
            <Column title="序号" render={(text, record, index)=><span>{index+1}</span>}/>
            <Column title="数据表名称" dataIndex="configName" key="configName"
            render={(text,record)=>(
              <span>{record}</span>
            )}/>
            <Column title="数据库类型" dataIndex="databaseType" key="databaseType" 
            render={(text,record)=>(
              <span>{this.props.match.params.dataType}</span>
            )}/>
          </Table>
          <div className={this.props.tables.length>0?'footer':'withoutPagination'}>
            显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{this.props.tables.length}项
          </div>
        </div>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    tables: state.getIn(['table','tables']).toJS()
  }
}

const mapDispatchToProps = (dispatch) => ({
  getAllTables(dataType,params){
    dispatch(actionCreators.getAllTablesOperation(dataType,params));
  },
  searchTable(value){

  }
})

export default connect(mapStateToProps, mapDispatchToProps)(TableList);